---
title: Tina CMS & Astro
description: Ajouter du contenu a votre projet Astro en utilisant Tina CMS
type: cms
stub: false
service: Tina CMS
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import Grid from '~/components/FluidGrid.astro'
import Card from '~/components/ShowcaseCard.astro'

[Tina CMS](https://tina.io/) est un système de gestion de contenu headless soutenu par Git.

## Integration avec Astro

Pour commencer, vous aurez besoin d'un projet Astro existant.

1. Exécutez la commande suivante pour installer Tina dans votre projet Astro.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx @tinacms/cli@latest init
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm dlx @tinacms/cli@latest init
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn dlx @tinacms/cli@latest init
      ```
      </Fragment>
    </PackageManagerTabs>

    - Lorsqu'on vous demande un Cloud ID, appuyez sur <kbd>Enter</kbd> pour passer. Vous en générerez un plus tard si vous souhaitez utiliser Tina Cloud.
    - A la question "What framework are you using", choisissez **Other**.
    - Lorsque l'on vous demande où sont stockées les ressources publiques, appuyez sur <kbd>Enter</kbd>.

    Une fois cette opération terminée, vous devriez avoir un dossier `.tina` à la racine de votre projet et un fichier `hello-world.md` généré dans `content/posts`.

2. Changez le script `dev` dans `package.json` :

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
    </PackageManagerTabs>

3. TinaCMS est maintenant configuré en mode local. Testez-le en lançant le script `dev`, puis en naviguant vers `/admin/index.html#/collections/post`.

    L'édition du post "Hello, World !" mettra à jour le fichier `content/posts/hello-world.md` dans le répertoire de votre projet.

4. Configurez vos collections Tina en éditant la propriété `schema.collections` dans `.tina/config.ts`.

    Par exemple, vous pouvez ajouter une propriété frontmatter "date posted" à nos posts :

    ```js title=".tina/config.ts" ins={35-40}
    import { defineConfig } from "tinacms";

    // Il est probable que votre hébergeur expose cette variable d'environnement
    const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

    export default defineConfig({
      branch,
      clientId: null, // Obtenir cette information de tina.io
      token: null, // Obtenir cette information de tina.io
      build: {
        outputFolder: "admin",
        publicFolder: "public",
      },
      media: {
        tina: {
          mediaRoot: "images",
          publicFolder: "public",
        },
      },
      schema: {
        collections: [
          {
            name: "posts",
            label: "Posts",
            path: "src/content/posts",
            format: 'mdx',
            fields: [
              {
                type: "string",
                name: "title",
                label: "Title",
                isTitle: true,
                required: true,
              },
              {
                type: "datetime",
                name: "posted",
                label: "Date Posted",
                required: true,
              },
              {
                type: "rich-text",
                name: "body",
                label: "Body",
                isBody: true,
              },
            ],
          },
        ],
      },
    });
    ```

    En savoir plus sur les collections Tina dans la [documentation Tina](https://tina.io/docs/reference/collections/).

5. En production, TinaCMS peut livrer des changements directement à votre dépôt GitHub. Pour configurer TinaCMS pour la production, vous pouvez choisir d'utiliser [Tina Cloud](https://tina.io/docs/tina-cloud/) ou d'auto-héberger la [couche de données Tina](https://tina.io/docs/self-hosted/overview/). Vous pouvez [en savoir plus sur l'inscription à Tina Cloud](https://app.tina.io/register) dans les Tina Docs.

## Ressources officielles

- [Guide d'intégration de TinaCMS avec Astro](https://tina.io/docs/frameworks/astro/).

## Ressources communautaires

- [Astro Tina Kit de démarrage avec une édition visuelle](https://github.com/dawaltconley/tina-astro) par Jeff See + Dylan Awalt-Conley
- [Astro Tina Kit de démarrage avec une édition basique](https://github.com/tombennet/astro-tina-starter/tree/main) par Tom Bennet
- [Utiliser les optimisations d'images Astro avec Tina](https://joschua.io/posts/2023/08/16/how-to-use-astro-assets-with-tina-cms/)

## Thèmes

<Grid>
  <Card title="Resume01" href="https://astro.build/themes/details/resume-01/" thumbnail="resume01.png"/>
</Grid>